<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>sl-ui</title>
    <script src="../vue.js"></script>
    <script src="../config.js"></script>
    <script src="../dist/sl-ui.js?ver=0.1"></script>
    <style type="text/css">
        a[href='http://www.layui.com/doc/modules/code.html'] { display: none; }
    </style>
</head>
<body>
    <div id="app" style="padding:0 150px;">
        <h1 style="font-size:24px;margin: 15px 0;">接口数据演示
            <span style="font-size:12px;">页面代码使用了es6语法，请使用谷歌浏览器打开</span>
            <a  style="font-size:15px;color: #001dff;" href="https://gitee.com/weifashi/sl-ui-show">下载示例文件</a>
        </h1>
        <h2 style="font-size:14px;margin: 15px 0;">缩放浏览器的窗口大小将会看到固定列的效果</h2>
        <sl-grid ref="grid" 
            :key-name="'id'" 
            :table-data="'http://weifashi.320.io/Itbiji/index.php/Slui/getDate'"
            :params="{'id':'1'}"
            :parse-data="{'code':'code', 'msg':'message', 'total':'data.total', 'data':'data.data', 'summary':'data.summary'}"
            :height="'350px'" 
            :title="'列表标题'" 
            :show-index="true" 
            :show-checkbox="true" 
            :show-title-row="true" 
            :show-refresh-btn="true" 
            :show-page="true" 
            :fixed-index-column="true"
            :enable-all-rort="'all'"
            :remote-summary="true"
            :remote-sort="true"
            :auto-load="true"
            :cell-class-name="rowClassName" 
            @loadSuccess="loadSuccessFn" 
            @row-click="rowclick" 
            @row-dblclick="rowDblClick" 
            @row-select="rowDblClick" 
            @input="input"
        >
            <template slot="headHtml">
                <div style="height: 100%;overflow: hidden;">自定义组件或html的放置区</div>
            </template>
            <template slot="button">
                <sl-button type="primary" text="获取数据" @click="getData"></sl-button>
                <sl-button type="primary" text="获取选中行" @click="getSelectedRows"></sl-button>
                <sl-button type="primary" text="删除选中行" @click="deleteSelectedRow"></sl-button>
                <sl-button type="primary" text="添加" @click="add"></sl-button>
                <sl-button type="text" text="清空数据" @click="wipeData"></sl-button>
                <sl-button type="warn" text="更多">
                    <dd @click="updateRow">更新指定行</dd>
                    <dd @click="selectedRows">选中行</dd>
                    <dd @click="deselect">取消选中</dd>
                </sl-button>
            </template>
            <template slot="cols">
                <cell type="text" title="二级表头" align="center" >
                    <cell type="text" title="文本类型" name="text" align="left" width="100" sort="true"  isEdit="true" vtype="*" merge="false"  ></cell>
                    <cell type="number" title="数字类型" name="num" align="right" width="100" sort="true"  isEdit="true" vtype="*" merge="false" min="0" max='1000' acc="2" total="[num]元" ></cell>
                </cell>
                <cell type="select" title="下拉类型" name="selects" align="center" width="80" sort="true" isEdit="true" vtype="*" merge="false" data="[{text:'男',value:'男'},{text:'女',value:'女'}]"></cell>
                <cell type="testFnType" title="自定义单元格" name="" align="left" width='350' minWidth="350" sort="false" total="false" merge="false"></cell>
                <cell type="datetime" title="时间类型" name="time" align="center" width="150" format="YYYY-MM-DD hh:mm:ss" isEdit="true"></cell>
                <cell type="button" title="操作" name="" align="center" width="100" fixed="right" click="deleteRow(rowIndex,row)[删除];enabledEdit(rowIndex,row)[编辑]" sort="false" ></cell>
            </template>
        </sl-grid>
        
        <!--html-->
        <h1  style="font-size:24px;margin:15px 0;">vue配置-以下大部分配置都可以丢到Vue.prototype.$slConfig对象中进行全局定义</h1>
        <pre class="layui-code" style="display: none;"> 
&lt;sl-grid ref=&quot;grid&quot; 
    :key-name=&quot;&#x27;id&#x27;&quot; 
    :table-data=&quot;&#x27;http://weifashi.320.io/Itbiji/index.php/Slui/getDate&#x27;&quot;
    :params=&quot;{&#x27;id&#x27;:&#x27;1&#x27;}&quot;
    :parse-data=&quot;{&#x27;code&#x27;:&#x27;code&#x27;, &#x27;msg&#x27;:&#x27;message&#x27;, &#x27;total&#x27;:&#x27;data.total&#x27;, &#x27;data&#x27;:&#x27;data.data&#x27;, &#x27;summary&#x27;:&#x27;data.summary&#x27;}&quot;
    :height=&quot;&#x27;350px&#x27;&quot; 
    :title=&quot;&#x27;&#x5217;&#x8868;&#x6807;&#x9898;&#x27;&quot; 
    :show-index=&quot;true&quot; 
    :show-checkbox=&quot;true&quot; 
    :show-title-row=&quot;true&quot; 
    :show-refresh-btn=&quot;true&quot; 
    :show-page=&quot;true&quot; 
    :fixed-index-column=&quot;true&quot;
    :enable-all-rort=&quot;&#x27;all&#x27;&quot;
    :remote-summary=&quot;true&quot;
    :remote-sort=&quot;true&quot;
    :auto-load=&quot;true&quot;
    :cell-class-name=&quot;rowClassName&quot; 
    @loadSuccess=&quot;loadSuccessFn&quot; 
    @row-click=&quot;rowclick&quot; 
    @row-dblclick=&quot;rowDblClick&quot; 
    @row-select=&quot;rowDblClick&quot; 
    @input=&quot;input&quot;
&gt;
    &lt;template slot=&quot;headHtml&quot;&gt;
        &lt;div style=&quot;height: 100%;overflow: hidden;&quot;&gt;&#x81EA;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;&#x6216;html&#x7684;&#x653E;&#x7F6E;&#x533A;&lt;/div&gt;
    &lt;/template&gt;
    &lt;template slot=&quot;button&quot;&gt;
        &lt;sl-button type=&quot;primary&quot; text=&quot;&#x83B7;&#x53D6;&#x6570;&#x636E;&quot; @click=&quot;getData&quot;&gt;&lt;/sl-button&gt;
        &lt;sl-button type=&quot;primary&quot; text=&quot;&#x83B7;&#x53D6;&#x9009;&#x4E2D;&#x884C;&quot; @click=&quot;getSelectedRows&quot;&gt;&lt;/sl-button&gt;
        &lt;sl-button type=&quot;primary&quot; text=&quot;&#x5220;&#x9664;&#x9009;&#x4E2D;&#x884C;&quot; @click=&quot;deleteSelectedRow&quot;&gt;&lt;/sl-button&gt;
        &lt;sl-button type=&quot;primary&quot; text=&quot;&#x6DFB;&#x52A0;&quot; @click=&quot;add&quot;&gt;&lt;/sl-button&gt;
        &lt;sl-button type=&quot;text&quot; text=&quot;&#x6E05;&#x7A7A;&#x6570;&#x636E;&quot; @click=&quot;wipeData&quot;&gt;&lt;/sl-button&gt;
        &lt;sl-button type=&quot;warn&quot; text=&quot;&#x66F4;&#x591A;&quot;&gt;
            &lt;dd @click=&quot;updateRow&quot;&gt;&#x66F4;&#x65B0;&#x6307;&#x5B9A;&#x884C;&lt;/dd&gt;
            &lt;dd @click=&quot;selectedRows&quot;&gt;&#x9009;&#x4E2D;&#x884C;&lt;/dd&gt;
            &lt;dd @click=&quot;deselect&quot;&gt;&#x53D6;&#x6D88;&#x9009;&#x4E2D;&lt;/dd&gt;
        &lt;/sl-button&gt;
    &lt;/template&gt;
    &lt;template slot=&quot;cols&quot;&gt;
        &lt;cell type=&quot;text&quot; title=&quot;&#x4E8C;&#x7EA7;&#x8868;&#x5934;&quot; align=&quot;center&quot; &gt;
            &lt;cell type=&quot;text&quot; title=&quot;&#x6587;&#x672C;&#x7C7B;&#x578B;&quot; name=&quot;text&quot; align=&quot;left&quot; width=&quot;100&quot; sort=&quot;true&quot;  isEdit=&quot;true&quot; vtype=&quot;*&quot; merge=&quot;false&quot;  &gt;&lt;/cell&gt;
            &lt;cell type=&quot;number&quot; title=&quot;&#x6570;&#x5B57;&#x7C7B;&#x578B;&quot; name=&quot;num&quot; align=&quot;right&quot; width=&quot;100&quot; sort=&quot;true&quot;  isEdit=&quot;true&quot; vtype=&quot;*&quot; merge=&quot;false&quot; min=&quot;0&quot; max=&#x27;1000&#x27; acc=&quot;2&quot; total=&quot;[num]&#x5143;&quot; &gt;&lt;/cell&gt;
        &lt;/cell&gt;
        &lt;cell type=&quot;select&quot; title=&quot;&#x4E0B;&#x62C9;&#x7C7B;&#x578B;&quot; name=&quot;selects&quot; align=&quot;center&quot; width=&quot;80&quot; sort=&quot;true&quot; isEdit=&quot;true&quot; vtype=&quot;*&quot; merge=&quot;false&quot; data=&quot;[{text:&#x27;&#x7537;&#x27;,value:&#x27;&#x7537;&#x27;},{text:&#x27;&#x5973;&#x27;,value:&#x27;&#x5973;&#x27;}]&quot;&gt;&lt;/cell&gt;
        &lt;cell type=&quot;testFnType&quot; title=&quot;&#x81EA;&#x5B9A;&#x4E49;&#x5355;&#x5143;&#x683C;&quot; name=&quot;&quot; align=&quot;left&quot; width=&#x27;350&#x27; minWidth=&quot;350&quot; sort=&quot;false&quot; total=&quot;false&quot; merge=&quot;false&quot;&gt;&lt;/cell&gt;
        &lt;cell type=&quot;datetime&quot; title=&quot;&#x65F6;&#x95F4;&#x7C7B;&#x578B;&quot; name=&quot;time&quot; align=&quot;center&quot; width=&quot;150&quot; format=&quot;YYYY-MM-DD hh:mm:ss&quot; isEdit=&quot;true&quot;&gt;&lt;/cell&gt;
        &lt;cell type=&quot;button&quot; title=&quot;&#x64CD;&#x4F5C;&quot; name=&quot;&quot; align=&quot;center&quot; width=&quot;100&quot; fixed=&quot;right&quot; click=&quot;deleteRow(rowIndex,row)[&#x5220;&#x9664;];enabledEdit(rowIndex,row)[&#x7F16;&#x8F91;]&quot; sort=&quot;false&quot; &gt;&lt;/cell&gt;
    &lt;/template&gt;
&lt;/sl-grid&gt;
        </pre>
        <h1 style="font-size:24px;margin: 15px 0;">script</h1>
        <pre class="layui-code script-code" style="display: none;"> </pre>
    </div>

    <script id="script">
        new Vue({
            el: '#app',
            data() {
                return {
                  
                }
            },
            mounted() {
               
            },
            methods: {
                //获取随机中文
                randomText(){
                    var _len = 2,i=0,_str="",_base=20000,_range=1000;
                    while(i < _len){ 
                        i++;
                        var _lower = parseInt(Math.random() * _range);
                        _str += String.fromCharCode(_base + _lower);
                    }
                    return _str;
                },
                // 自定义类型
                testFnType(row, rowKey, col, colKey) {
                    return `<a @click='testFnTypeEvent(2)'>我是自定义类型: ${row['id']} </a>`;
                },
                // 自定义类型的事件使用
                testFnTypeEvent(mode) {
                    console.log(this.slApp);
                    console.log(mode);
                },
                //加载成功
                loadSuccessFn(data, summary) {
                    this.$refs["grid"].disabledEdit();
                },
                //启用编辑
                enabledEdit(rowindex, row) {
                    this.$refs["grid"].enabledEdit(rowindex);
                },
                //清空数据
                wipeData(rowindex){
                    this.$refs["grid"].emptyData();
                },
                // 删除行
                deleteRow(rowindex, row) {
                    this.$refs["grid"].deleteRow(rowindex);
                },
                //获取表格数据
                getData() {
                    let data = this.$refs["grid"].getData();
                    alert( JSON.stringify(data) )
                    console.log(data)
                },
                //获取选中行
                getSelectedRows() {
                    let data = this.$refs["grid"].getSelectedRows();
                    alert( JSON.stringify(data) )
                    console.log(data)
                },
                //删除选中行
                deleteSelectedRow() {
                    let rowindexs = this.$refs["grid"].getSelectedIndexs();
                    if(!rowindexs){
                        return alert("没有选中数据！");
                    }
                    this.$refs["grid"].deleteRow( rowindexs );
                },
                // 选中指定行
                selectedRows() {
                    this.$refs["grid"].select(3);
                },
                // 取消选中行
                deselect() {
                    this.$refs["grid"].deselect("all")
                },
                //更新行
                updateRow() {
                    let grid = this.$refs["grid"];
                    grid.select([{name:"id",value:"1"}]);
                    grid.updateRow("id", "1",{
                        text:"我已被更新", 
                        num: 1002, 
                        selects: ["男","女"][ Math.floor((Math.random()*2)) ],
                        time: "2018-09-19 12:33",
                    });
                },
                // 添加行
                add() {
                    let grid = this.$refs["grid"];
                    var day = new Date();
                    var rows= [{
                        id: 10001 ,
                        text:this.randomText(), 
                        num: 100, 
                        selects: ["男","女"][ Math.floor((Math.random()*2)) ],
                        time: day.getFullYear()+"-" + (day.getMonth()+1) + "-" + day.getDate(),
                        _isChecked:true
                    }];
                    grid.addRow(rows,1);
                },
                // 行单击
                rowclick(row, rowIndex, el) {
                    console.log("行单击")
                },
                // 行双击事件
                rowDblClick(row, rowIndex, el) {
                    console.log("行双击")
                },
                // 监听输入事件
                input(field, value, row, rowIndex) {
                    console.log(field)
                    console.log(value)
                    console.log(row)
                    console.log(rowIndex)
                },
                // 获取自定行的classname
                rowClassName(row, rowIndex) {
                    if(rowIndex == 3) {
                        return "sssdsd";
                    } else {
                        return "";
                    }
                }
            }
        })
    </script>

    <link rel="stylesheet" type="text/css" href="../layui/css/layui.mobile.css" />
    <script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        layui.use('code', function() {
            document.querySelector(".script-code").innerHTML = document.querySelector("#script").innerHTML;
            document.querySelectorAll(".layui-code")[0].style.display = "block";
            document.querySelectorAll(".layui-code")[1].style.display = "block";
            layui.code();
        });
    </script>
</body>
</html>